{% extends "base.html" %}

{% block title %}首页 - Twitter(X) AI 监控系统{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1 style="background: linear-gradient(45deg, #667eea, #764ba2, #f093fb); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
                <i class="bi bi-robot"></i> Twitter(X) AI 监控系统
            </h1>
            <div class="d-flex align-items-center">
                <span class="text-muted me-3">共 {{ tweets|length }} 条新闻</span>
                <span id="live-status" class="badge bg-secondary">
                    <i class="bi bi-circle-fill"></i> 实时更新
                </span>
            </div>
        </div>
    </div>
</div>

<!-- 筛选器 -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title" style="color: #ffffff;"><i class="bi bi-sliders"></i> Neural Filters</h5>
                <form method="GET" class="row g-3">
                    <div class="col-md-3">
                        <label for="author" class="form-label">作者</label>
                        <select class="form-select" id="author" name="author">
                            <option value="">全部作者</option>
                            {% for author in authors %}
                                <option value="{{ author }}" {% if author == current_author %}selected{% endif %}>
                                    {{ author }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="start_date" class="form-label">开始日期</label>
                        <input type="date" class="form-control" id="start_date" name="start_date" value="{{ start_date }}">
                    </div>
                    <div class="col-md-3">
                        <label for="end_date" class="form-label">结束日期</label>
                        <input type="date" class="form-control" id="end_date" name="end_date" value="{{ end_date }}">
                    </div>
                    <div class="col-md-3 d-flex align-items-end">
                        <button type="submit" class="btn btn-primary me-2">
                            <i class="bi bi-search"></i> 筛选
                        </button>
                        <a href="{{ url_for('index') }}" class="btn btn-outline-secondary">
                            <i class="bi bi-arrow-clockwise"></i> 重置
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 新闻卡片列表 -->
<div class="row">
    {% if tweets %}
        {% for tweet in tweets %}
            <div class="col-lg-6 col-xl-4 mb-4">
                <div class="card h-100 tweet-card" data-tweet-id="{{ tweet.id }}" style="cursor: pointer;">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <div class="d-flex align-items-center">
                            <i class="bi bi-person-circle me-2"></i>
                            <strong>{{ tweet.author }}</strong>
                        </div>
                        <small class="text-muted">
                            {% if tweet.formatted_created_at %}
                                {{ tweet.formatted_created_at }}
                            {% elif tweet.created_at %}
                                {{ tweet.created_at[:19] }}
                            {% endif %}
                        </small>
                    </div>
                    <div class="card-body">
                        <h6 class="card-title mb-3" style="color: #00d4ff; text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);">
                            <i class="bi bi-cpu-fill"></i> {{ tweet.ai_title }}
                        </h6>
                        <p class="card-text">
                            {{ tweet.ai_translation[:150] }}{% if tweet.ai_translation|length > 150 %}...{% endif %}
                        </p>
                    </div>
                    <div class="card-footer text-muted">
                        <small>
                            <div class="d-flex justify-content-between align-items-center">
                                <span>
                                    <i class="bi bi-clock"></i> 
                                    发帖: {% if tweet.formatted_created_at %}{{ tweet.formatted_created_at }}{% elif tweet.created_at %}{{ tweet.created_at[:19] }}{% endif %}
                                </span>
                                <span>
                                    <i class="bi bi-gear"></i> 
                                    处理: {% if tweet.beijing_time %}{{ tweet.beijing_time }}{% elif tweet.timestamp %}{{ tweet.timestamp[:19].replace('T', ' ') }}{% endif %}
                                </span>
                            </div>
                        </small>
                    </div>
                </div>
            </div>
        {% endfor %}
    {% else %}
        <div class="col-12">
            <div class="text-center py-5 empty-state">
                <i class="bi bi-database display-1" style="color: rgba(102, 126, 234, 0.6);"></i>
                <h3 class="mt-3" style="color: #b8c5d1;">Neural Network Idle</h3>
                <p style="color: rgba(184, 197, 209, 0.8);">Activate AI monitoring system to begin intelligence gathering</p>
                <a href="{{ url_for('settings') }}" class="btn btn-primary">
                    <i class="bi bi-gear"></i> 前往设置
                </a>
            </div>
        </div>
    {% endif %}
</div>

<!-- 加载更多按钮 -->
{% if tweets|length >= 20 %}
<div class="row">
    <div class="col-12 text-center">
        <button class="btn btn-outline-primary" id="load-more">
            <i class="bi bi-arrow-down-circle"></i> 加载更多
        </button>
    </div>
</div>
{% endif %}
{% endblock %}

{% block scripts %}
<script>
// 快速日期选择按钮
document.addEventListener('DOMContentLoaded', function() {
    // 快速日期选择按钮
    const quickDateButtons = document.createElement('div');
    quickDateButtons.className = 'mt-2 quick-date-buttons';
    quickDateButtons.innerHTML = `
        <small class="text-muted me-2">快速选择:</small>
        <button type="button" class="btn btn-outline-secondary btn-sm me-1" onclick="setQuickDate('today')">今天</button>
        <button type="button" class="btn btn-outline-secondary btn-sm me-1" onclick="setQuickDate('yesterday')">昨天</button>
        <button type="button" class="btn btn-outline-secondary btn-sm me-1" onclick="setQuickDate('week')">最近7天</button>
        <button type="button" class="btn btn-outline-secondary btn-sm" onclick="setQuickDate('month')">最近30天</button>
    `;
    
    // 将快速日期选择按钮插入到筛选表单后面
    const filterForm = document.querySelector('form');
    if (filterForm) {
        filterForm.parentNode.insertBefore(quickDateButtons, filterForm.nextSibling);
    }
});
</script>
{% endblock %} 